<template>
  <div>
    <div class="search">
      <span>订单单号:</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.id"
        placeholder="请输入内容"
        size="small"
        @input="input1"
      ></el-input>
      <span style="margin: 0 0 0 1%">收货人 :</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.names"
        placeholder="请输入内容"
        size="small"
        @input="input2"
      ></el-input>
      <el-button
        type="primary"
        size="small"
        style="margin: 0 0 0 1%"
        @click="search"
        >搜索</el-button
      >
    </div>
    <div class="table">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单编码" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="shopnames" label="下单商品" width="180">
        </el-table-column>
        <el-table-column prop="olderTime" label="下单时间">
        </el-table-column>
        <el-table-column prop="counts" label="下单数量"> </el-table-column>
        <el-table-column prop="total" label="总价"> </el-table-column>
        <el-table-column prop="address" label="配送地址"> </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="names" label="收货人"> </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">已下单</span>
            <span v-else-if="scope.row.status == 1">已发出</span>
            <span v-else-if="scope.row.status == 2">已取消</span>
            <span v-else-if="scope.row.status == 3">已签收</span>
            <span v-else-if="scope.row.status == 4">已取消,已退款</span>
            <span v-else-if="scope.row.status == 5">用户申请退货退款</span>
            <span v-else-if="scope.row.status == 6">已退货,已退款</span>
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作栏">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              style="margin: 0 0 0 1%"
              @click="open(scope.row)"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <dialogView ref="dialog" />
  </div>
</template>

<script>
import { getBossShopList } from "@/api/shop";
import dialogView from "./dialogView.vue";
export default {
  components: {
    dialogView,
  },
  data() {
    return {
      tableData: [],
      query: {
        names: "", //接收人
        id: "", //订单id
      },
      pagination: {
        total: 0,
        pageNo: 1,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      //置空
      // this.pagination.pageNo=1
      for (let key in this.query) {
        this.query[key] == "";
      }
      let obj = {
        pageSize: 10,
        pageNo: this.pagination.pageNo,
        names: this.query.names,
        id: this.query.id,
      };
      getBossShopList(obj).then((res) => {
        if (res.code == 200) {
          // res.data.data.forEach((i) => {
          //   const date = new Date(i.olderTime);
          //   // 将日期转换为指定时区（比如中国标准时间，CST）
          //   const cstOffset = 8 * 60; // CST 相对于 UTC 的偏移量（以分钟为单位）
          //   const cstDate = new Date(date.getTime() + cstOffset * 60000); // 加上偏移量
          //   // 从转换后的日期对象中提取年月日时分秒
          //   const year = cstDate.getFullYear();
          //   const month = String(cstDate.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，所以要加 1
          //   const day = String(cstDate.getDate()).padStart(2, "0");
          //   const hour = String(cstDate.getHours()).padStart(2, "0");
          //   const minute = String(cstDate.getMinutes()).padStart(2, "0");
          //   const second = String(cstDate.getSeconds()).padStart(2, "0");

          //   // 输出年月日时分秒格式
          //   i.olderTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
          // });
          // 创建 Date 对象
          this.tableData = res.data.data;
          this.pagination.total = res.data.total;
        }
      });
    },
    handleCurrentChange(e) {
      this.pagination.pageNo = e;
      this.getData();
    },
    search() {
      this.pagination.pageNo = 1;
      this.getData();
    },
    //打开操作栏
    open(e) {
      this.$refs.dialog.dialogVisible = true;
      this.$refs.dialog.form = Object.assign(this.$refs.dialog.form, e);
      console.log(this.$refs.dialog.form);
    },
    input1(e) {
      console.log(e, "eeeppp");
    },
    input2(e) {
      console.log(e, "00999");
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 2% 0 0 5%;
}
.table {
  width: 90%;
  margin: 2vw auto;
}
</style>
